<template>
    <div>

        <span id="info-login-out" @click="loginOut" title="安全退出">安全退出<i class="el-icon-cxl-exit"></i></span>

        <el-popover class="info-user-name" placement="top-start" title="标题" width="200" trigger="hover" :content="infoContent">
            <span slot="reference">
                 {{userName}}
                <img id="info-header-img" src="../assets/img/default_header_img.png"/>
            </span>
        </el-popover>

        <el-dropdown class="info-header-message">
            <span class="el-dropdown-link">
                消息
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>系统消息</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <!--<span id="info-user">{{userName}}</span>-->
        <!--<el-dropdown>-->
            <!--<i class="el-icon-setting" style="margin-right: 15px"></i>-->
            <!--<el-dropdown-menu slot="dropdown">-->
                <!--<el-dropdown-item>个人中心</el-dropdown-item>-->
                <!--<el-dropdown-item>新增</el-dropdown-item>-->
            <!--</el-dropdown-menu>-->
        <!--</el-dropdown>-->
    </div>
</template>

<script>

    import {baseUtil} from '@/util/BaseUtil';

    export default {
        name: "el-header-info",
        data() {
            return {
                baseUtil: baseUtil,
                userInfo: {},
                userName : "",
                infoContent : "这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            }
        },
        methods: {
            loginOut() {
                this.baseUtil.ajax(this, '/loginOut', {}, (response) => {
                    console.log(response);
                    this.$router.push({ name: 'login'});
                }, "post");
            }
        },
        created() {
            // 从cookie中获取到登录的用户信息
            let userInfo = this.$cookies.get("redefine_user_info");
            this.userName = userInfo.infoName;
        }
    }
</script>

<style lang="scss">

    .info-user-name{
        float: right;
        margin-left: 5px;
        margin-right: 20px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;

        #info-header-img{
            margin: 5px;
            height: 50px;
            border-radius: 50%;
            float: left;
        }
    }

    .info-header-message{
        margin-right: 20px;
        font-size: 20px;
        /*font-weight: bold;*/
        /*height: 60px;*/
        /*line-height: 60px;*/
        cursor: pointer;
    }

    #info-login-out{
        float: right;
        display: inline-block;
        width: 120px;
        font-size: 20px;
        /*font-weight: bold;*/
        height: 60px;
        line-height: 60px;
        text-align: center;
        cursor: pointer;

        i{
            margin-left: 5px;
            font-size: 20px;
            font-weight: bold;
        }

        &:hover{
            color: red;
            /*background-color: rgba(255, 0, 0, 0.5);*/
        }
    }



</style>
